JQuery-錨點動畫

什麼是錨點 & 錨點的作用是什麼

他是超連結的一種，可以幫助我們更快速的尋找我們所要的資訊，
就不用一直滾動頁面來尋找我們所要的資訊了

我在網路上找到一個別人做的網頁，
https://huangkaisong.github.io/ --> 點進這個網址來試玩看看錨點的功能

基本語法

在網頁的某一個位置中，插入一個錨點(隨至隨你放，看你要讓錨點在哪)

<a name="abc"></a>

只要點選，就會自動跳到剛剛上面所設定的錨點位置

<a href="#abc">顯示的字樣</a>

範例

完整程式碼長這樣

$(function(){
    $('.scroll').on('click',function(){//繫結點選事件
        let haha = $('#haha').offset().top;//獲取對應元素劇情螢幕頂部的距離
        $('html,body').animate({scrollTop:haha},800);//動畫出爐
    });
});

1. 給要進行錨點跳轉的 標籤加一個類 例：

<a href="#haha" class="scroll">

2. 獲取對應節點距離瀏覽器頂部的距離 例 ：

let haha = $('#haha').offset().top

3. 給所有要錨點動畫的加上點選事件 例：

$('.scroll').on('click',function())

這樣就可以做出我們的錨點動畫啦
那我們鐵人賽Day27見囉!!